---
layout: default
title: HP goes FE - Font awesome 查询
---
<style type="text/css" media="screen">
  .container{
    width: 90%;
    margin: auto;
  }
  .container li {
    list-style: none;
    width: 230px !important;
    display: inline-block;
    font-size: 1.2rem;
  }
  .container li span{
    margin-right: 5px;
  }
  
</style>


<div class="container">
  <h1>Fontawesome icon list.</h1>
  <hr/>
  <ul></ul>
</div>


<!--script-->

<script type="text/javascript" charset="utf-8">

//(function(){

var faSheet
  , styleSheets = document.styleSheets
  , iconClasses = [];

for(var i=0; i<styleSheets.length; i++){
  var styleSheet = styleSheets[i];
  if(styleSheet.href.search('fontawesome') > -1 ){
    faSheet = styleSheet;
    break;
  }
}

function getIconClasses(sheet){
  var rule = null, ruleList = sheet.cssRules, len = ruleList.length;
  var _style
      , key='::before'
      , keyPos=-1;
  console.log("len is", len);

  function stripForClass(text, keyPos){
    return text.slice(text.indexOf('.')+1, keyPos);
  }

  for(var i = 0; i < len; i++){
    _style = ruleList[i];
    if(! _style.selectorText){continue;}

    keyPos = _style.selectorText.search(key);
    if( keyPos > -1){
      iconClasses.push(stripForClass(_style.selectorText, keyPos));
    }
  }
  return iconClasses;
}

var testClass = 'fa-bars'

function addElements(classList){
  var container = document.querySelector('.container ul');
  var classLen = classList.length;
  for(var i=0; i<classLen; i++){
    var newLi = document.createElement('li');
    var newSpan = document.createElement('span');
    var _class = document.createAttribute('class');
    var faClass = classList[i];

    _class.nodeValue = "fa " + faClass;
    var textNode = document.createTextNode(faClass);

    newSpan.setAttributeNode(_class);
    newLi.appendChild(newSpan);
    newLi.appendChild(textNode);
    container.appendChild(newLi);
  }
}

window.faSheet = faSheet;
iconClasses = getIconClasses(faSheet);
addElements(iconClasses);
console.log("iconClasses is", iconClasses);


//})();
  
</script>
